<template>
  <view class="page-container">
    <!-- 顶部搜索区 -->
    <view class="search-section">
      <view class="search-box">
        <uni-icons type="search" size="20" color="#666"></uni-icons>
        <input type="text" v-model="searchText" placeholder="搜索专业" class="search-input" @input="searchMajor" />
      </view>
      <uni-icons type="filter" size="24" color="#333" @click="showFilter"></uni-icons>
    </view>
    <!-- 分类标签栏 -->
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-list">
        <view v-for="(item, index) in categories" :key="index"
          :class="['category-item', activeCategory === index ? 'active' : '']" @click="selectCategory(item, index)">
          {{ item }}
        </view>
      </view>
    </scroll-view>
    <!-- 专业列表区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <view class="major-list">
        <view v-for="(major, index) in majors" :key="index" class="major-card" :class="{ 'expanded': major.isExpanded }"
          @click="toggleExpand(index)">
          <view class="major-header">
            <view class="major-title">{{ major.name }}</view>
            <view class="major-category">{{ major.category }}</view>
          </view>
          <view class="major-brief">{{ major.brief }}</view>
          <view v-show="major.isExpanded" class="major-detail">
            <view class="detail-section">
              <view class="section-title">
                <uni-icons type="staff" size="20" color="#3498db"></uni-icons>
                <text>就业方向</text>
              </view>
              <view class="job-prospects">
                <view v-for="(job, jIndex) in major.jobs" :key="jIndex" class="job-item">
                  <text>{{ job.title }}</text>
                  <text class="job-percent">{{ job.percent }}</text>
                </view>
              </view>
            </view>
            <view class="detail-section">
              <view class="section-title">
                <uni-icons type="wallet" size="20" color="#3498db"></uni-icons>
                <text>薪资范围</text>
              </view>
              <view class="salary-info">
                <view class="salary-bar">
                  <view class="salary-progress" :style="{ width: major.salaryPercent + '%' }"></view>
                </view>
                <view class="salary-range">
                  <text>{{ major.salaryRange }}</text>
                </view>
              </view>
            </view>
            <view class="detail-section">
              <view class="section-title">
                <uni-icons type="calendar" size="20" color="#3498db"></uni-icons>
                <text>核心课程</text>
              </view>
              <view class="course-list">
                <view v-for="(course, cIndex) in major.courses" :key="cIndex" class="course-item">
                  {{ course }}
                </view>
              </view>
            </view>
            <view class="detail-section">
              <view class="section-title">
                <uni-icons type="flag" size="20" color="#3498db"></uni-icons>
                <text>发展建议</text>
              </view>
              <view class="suggestion-content">{{ major.suggestion }}</view>
            </view>
          </view>

        </view>
      </view>
    </scroll-view>

  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const searchText = ref('');
const activeCategory = ref(0);
const activeTab = ref(0);
const list = [
  {
    name: '计算机科学与技术',
    category: '工学',
    brief: '培养具备计算机系统、软件开发、人工智能等领域的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '软件开发工程师', percent: '45%' },
      { title: '算法工程师', percent: '25%' },
      { title: '系统架构师', percent: '15%' },
      { title: '产品经理', percent: '15%' }
    ],
    salaryRange: '8k-50k',
    salaryPercent: 85,
    courses: [
      '数据结构与算法',
      '计算机组成原理',
      '操作系统',
      '数据库系统',
      '软件工程'
    ],
    suggestion: '建议在校期间多参与实际项目开发，积累项目经验，培养算法思维和工程能力，可以通过开源社区和实习来提升实践能力。'
  },
  {
    name: '软件工程',
    category: '工学',
    brief: '培养具备软件设计、开发、测试和维护能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '后端开发工程师', percent: '40%' },
      { title: '前端开发工程师', percent: '30%' },
      { title: '测试工程师', percent: '15%' },
      { title: '运维工程师', percent: '15%' }
    ],
    salaryRange: '7k-45k',
    salaryPercent: 80,
    courses: [
      '软件工程导论',
      'web开发技术',
      '软件测试',
      '需求工程',
      '项目管理'
    ],
    suggestion: '建议多参加实际项目开发，掌握主流开发框架和工具，培养团队协作能力，积累项目经验。'
  },
  {
    name: '人工智能',
    category: '工学',
    brief: '培养具备机器学习、深度学习、计算机视觉等AI领域专业能力的人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: 'AI算法工程师', percent: '40%' },
      { title: '机器学习工程师', percent: '30%' },
      { title: '计算机视觉工程师', percent: '20%' },
      { title: '自然语言处理工程师', percent: '10%' }
    ],
    salaryRange: '10k-60k',
    salaryPercent: 90,
    courses: [
      '机器学习',
      '深度学习',
      '计算机视觉',
      '自然语言处理',
      '强化学习'
    ],
    suggestion: '建议打好数学基础，关注AI前沿技术，参与实际AI项目开发，培养算法创新能力。'
  },
  {
    name: '网络工程',
    category: '工学',
    brief: '培养具备网络规划、设计、部署和运维能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '网络工程师', percent: '35%' },
      { title: '网络安全工程师', percent: '30%' },
      { title: '系统运维工程师', percent: '20%' },
      { title: '云计算工程师', percent: '15%' }
    ],
    salaryRange: '6k-40k',
    salaryPercent: 75,
    courses: [
      '计算机网络',
      '网络安全',
      '路由与交换',
      '云计算技术',
      '网络规划与设计'
    ],
    suggestion: '建议考取思科、华为等网络认证，多进行网络配置实践，培养网络故障排查能力。'
  },
  {
    name: '金融学',
    category: '经济学',
    brief: '培养具备现代金融理论与实务操作能力的复合型人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '投资分析师', percent: '30%' },
      { title: '风险控制', percent: '25%' },
      { title: '理财顾问', percent: '25%' },
      { title: '银行业务', percent: '20%' }
    ],
    salaryRange: '6k-40k',
    salaryPercent: 75,
    courses: [
      '金融学原理',
      '投资学',
      '财务管理',
      '货币银行学',
      '证券投资学'
    ],
    suggestion: '建议在学习期间考取相关证券从业资格证书，关注金融市场动态，培养数据分析能力和风险管理意识。'
  },
  {
    name: '经济学',
    category: '经济学',
    brief: '培养具备经济分析、政策研究和市场预测能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '经济分析师', percent: '35%' },
      { title: '市场研究员', percent: '25%' },
      { title: '政策研究员', percent: '20%' },
      { title: '咨询顾问', percent: '20%' }
    ],
    salaryRange: '5k-35k',
    salaryPercent: 70,
    courses: [
      '政治经济学',
      '宏观经济学',
      '微观经济学',
      '计量经济学',
      '经济统计学'
    ],
    suggestion: '建议关注经济政策和市场动态，培养数据分析能力，提升经济现象分析和预测能力。'
  },
  {
    name: '数据科学与大数据技术',
    category: '理学',
    brief: '培养具备大数据处理、分析和挖掘能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '数据分析师', percent: '35%' },
      { title: '数据挖掘工程师', percent: '30%' },
      { title: '商业智能分析师', percent: '20%' },
      { title: '数据架构师', percent: '15%' }
    ],
    salaryRange: '8k-45k',
    salaryPercent: 80,
    courses: [
      '数据挖掘',
      '机器学习',
      '统计分析',
      '数据可视化',
      '分布式计算'
    ],
    suggestion: '建议多实践数据处理和分析项目，掌握主流大数据工具，培养数据洞察能力。'
  },
  {
    name: '物联网工程',
    category: '工学',
    brief: '培养具备物联网系统设计、开发和集成能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '物联网开发工程师', percent: '35%' },
      { title: '嵌入式开发工程师', percent: '30%' },
      { title: '系统集成工程师', percent: '20%' },
      { title: '智能硬件工程师', percent: '15%' }
    ],
    salaryRange: '7k-42k',
    salaryPercent: 78,
    courses: [
      '传感器技术',
      '嵌入式系统',
      '无线通信',
      '物联网架构',
      '智能控制'
    ],
    suggestion: '建议多参与物联网项目实践，掌握硬件设计和软件开发技能，培养系统集成能力。'
  }
]
const categories = [
  '全部',
  '工学',
  '理学',
  '文学',
  '经济学',
  '管理学',
  '医学',
  '法学',
  '教育学'
];
const tabs = [
  { name: '专业', icon: 'home' },
  { name: '院校', icon: 'location' },
  { name: '测评', icon: 'checkbox' },
  { name: '咨询', icon: 'chat' }
];
const majors = ref([
  {
    name: '计算机科学与技术',
    category: '工学',
    brief: '培养具备计算机系统、软件开发、人工智能等领域的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '软件开发工程师', percent: '45%' },
      { title: '算法工程师', percent: '25%' },
      { title: '系统架构师', percent: '15%' },
      { title: '产品经理', percent: '15%' }
    ],
    salaryRange: '8k-50k',
    salaryPercent: 85,
    courses: [
      '数据结构与算法',
      '计算机组成原理',
      '操作系统',
      '数据库系统',
      '软件工程'
    ],
    suggestion: '建议在校期间多参与实际项目开发，积累项目经验，培养算法思维和工程能力，可以通过开源社区和实习来提升实践能力。'
  },
  {
    name: '软件工程',
    category: '工学',
    brief: '培养具备软件设计、开发、测试和维护能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '后端开发工程师', percent: '40%' },
      { title: '前端开发工程师', percent: '30%' },
      { title: '测试工程师', percent: '15%' },
      { title: '运维工程师', percent: '15%' }
    ],
    salaryRange: '7k-45k',
    salaryPercent: 80,
    courses: [
      '软件工程导论',
      'web开发技术',
      '软件测试',
      '需求工程',
      '项目管理'
    ],
    suggestion: '建议多参加实际项目开发，掌握主流开发框架和工具，培养团队协作能力，积累项目经验。'
  },
  {
    name: '人工智能',
    category: '工学',
    brief: '培养具备机器学习、深度学习、计算机视觉等AI领域专业能力的人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: 'AI算法工程师', percent: '40%' },
      { title: '机器学习工程师', percent: '30%' },
      { title: '计算机视觉工程师', percent: '20%' },
      { title: '自然语言处理工程师', percent: '10%' }
    ],
    salaryRange: '10k-60k',
    salaryPercent: 90,
    courses: [
      '机器学习',
      '深度学习',
      '计算机视觉',
      '自然语言处理',
      '强化学习'
    ],
    suggestion: '建议打好数学基础，关注AI前沿技术，参与实际AI项目开发，培养算法创新能力。'
  },
  {
    name: '网络工程',
    category: '工学',
    brief: '培养具备网络规划、设计、部署和运维能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '网络工程师', percent: '35%' },
      { title: '网络安全工程师', percent: '30%' },
      { title: '系统运维工程师', percent: '20%' },
      { title: '云计算工程师', percent: '15%' }
    ],
    salaryRange: '6k-40k',
    salaryPercent: 75,
    courses: [
      '计算机网络',
      '网络安全',
      '路由与交换',
      '云计算技术',
      '网络规划与设计'
    ],
    suggestion: '建议考取思科、华为等网络认证，多进行网络配置实践，培养网络故障排查能力。'
  },
  {
    name: '金融学',
    category: '经济学',
    brief: '培养具备现代金融理论与实务操作能力的复合型人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '投资分析师', percent: '30%' },
      { title: '风险控制', percent: '25%' },
      { title: '理财顾问', percent: '25%' },
      { title: '银行业务', percent: '20%' }
    ],
    salaryRange: '6k-40k',
    salaryPercent: 75,
    courses: [
      '金融学原理',
      '投资学',
      '财务管理',
      '货币银行学',
      '证券投资学'
    ],
    suggestion: '建议在学习期间考取相关证券从业资格证书，关注金融市场动态，培养数据分析能力和风险管理意识。'
  },
  {
    name: '经济学',
    category: '经济学',
    brief: '培养具备经济分析、政策研究和市场预测能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '经济分析师', percent: '35%' },
      { title: '市场研究员', percent: '25%' },
      { title: '政策研究员', percent: '20%' },
      { title: '咨询顾问', percent: '20%' }
    ],
    salaryRange: '5k-35k',
    salaryPercent: 70,
    courses: [
      '政治经济学',
      '宏观经济学',
      '微观经济学',
      '计量经济学',
      '经济统计学'
    ],
    suggestion: '建议关注经济政策和市场动态，培养数据分析能力，提升经济现象分析和预测能力。'
  },
  {
    name: '数据科学与大数据技术',
    category: '理学',
    brief: '培养具备大数据处理、分析和挖掘能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '数据分析师', percent: '35%' },
      { title: '数据挖掘工程师', percent: '30%' },
      { title: '商业智能分析师', percent: '20%' },
      { title: '数据架构师', percent: '15%' }
    ],
    salaryRange: '8k-45k',
    salaryPercent: 80,
    courses: [
      '数据挖掘',
      '机器学习',
      '统计分析',
      '数据可视化',
      '分布式计算'
    ],
    suggestion: '建议多实践数据处理和分析项目，掌握主流大数据工具，培养数据洞察能力。'
  },
  {
    name: '物联网工程',
    category: '工学',
    brief: '培养具备物联网系统设计、开发和集成能力的专业人才',
    isExpanded: false,
    isCollected: false,
    jobs: [
      { title: '物联网开发工程师', percent: '35%' },
      { title: '嵌入式开发工程师', percent: '30%' },
      { title: '系统集成工程师', percent: '20%' },
      { title: '智能硬件工程师', percent: '15%' }
    ],
    salaryRange: '7k-42k',
    salaryPercent: 78,
    courses: [
      '传感器技术',
      '嵌入式系统',
      '无线通信',
      '物联网架构',
      '智能控制'
    ],
    suggestion: '建议多参与物联网项目实践，掌握硬件设计和软件开发技能，培养系统集成能力。'
  }
]);

const searchMajor = (e) => {
  const val = e.detail.value;
  if (val === '' || !val) {

    majors.value = list
  }
  const result = list.filter((major) => major.name.includes(val));
  majors.value = result;

}

const selectCategory = (item, index: number) => {
  if (item === '全部') {
    majors.value = list;
  } else {
    majors.value = list.filter((major) => major.category === item);
  }
  activeCategory.value = index;

};
const toggleExpand = (index: number) => {
  majors.value[index].isExpanded = !majors.value[index].isExpanded;
};
const toggleCollect = (index: number) => {
  majors.value[index].isCollected = !majors.value[index].isCollected;
};

const showFilter = () => {
  // @ts-ignore
  uni.showToast({
    title: '筛选功能开发中',
    icon: 'none'
  });
};
const switchTab = (index: number) => {
  activeTab.value = index;
};
</script>
<style scoped>
page {
  height: 100%;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
}

.search-section {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  flex-shrink: 0;
}

.search-box {
  flex: 1;
  height: 72rpx;
  background-color: #f5f6fa;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 72rpx;
  margin-left: 20rpx;
  font-size: 14px;
}

.category-scroll {
  height: 88rpx;
  background-color: #fff;
  flex-shrink: 0;
}

.category-list {
  display: flex;
  padding: 0 20rpx;
  height: 88rpx;
}

.category-item {
  padding: 0 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.category-item.active {
  color: #3498db;
  font-weight: bold;
  position: relative;
}

.category-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #3498db;
  border-radius: 2rpx;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.major-list {
  padding: 20rpx;
}

.major-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.major-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.major-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.major-category {
  font-size: 12px;
  color: #3498db;
  background-color: rgba(52, 152, 219, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.major-brief {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.major-detail {
  border-top: 1px solid #eee;
  padding-top: 20rpx;
}

.detail-section {
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.job-prospects {
  display: flex;
  flex-wrap: wrap;
}

.job-item {
  width: 50%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-bottom: 10rpx;
  padding-right: 20rpx;
}

.job-percent {
  color: #3498db;
}

.salary-info {
  padding: 20rpx 0;
}

.salary-bar {
  height: 20rpx;
  background-color: #f5f6fa;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.salary-progress {
  height: 100%;
  background-color: #3498db;
  border-radius: 10rpx;
}

.salary-range {
  font-size: 14px;
  color: #666;
}

.course-list {
  display: flex;
  flex-wrap: wrap;
}

.course-item {
  background-color: #f5f6fa;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 0;
  font-size: 14px;
  color: #666;
}

.suggestion-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 30rpx;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #eee;
}

.tab-bar {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 6rpx;
}

.active-text {
  color: #3498db;
}
</style>
  